<template>
    <div class="userInfo-box" v-if="userInfo">
        <el-form ref="userInfo" :rules="rules" :model="userInfo" label-width="120px" label-position="left">
            <div class="inline-box">
                <div class="inline-box-left">
                    <el-form-item label="昵称" prop="nickname">
                        <el-input v-model="userInfo.nickname" class="input-text" placeholder="不可与已有昵称重复"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <div class="radio-sex">
                            <el-radio v-model="userInfo.sex" label="男">男</el-radio>
                            <el-radio v-model="userInfo.sex" label="女">女</el-radio>
                        </div>
                    </el-form-item>
                    <el-form-item label="出生日期">
                        <el-date-picker
                            class="birthday"
                            v-model="userInfo.birthday"
                            type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="手机号码">
                        <el-input v-model="userInfo.mobile" class="input-text" placeholder="手机号码"></el-input>
                    </el-form-item>
                </div>
                <div class="inline-box-right">
                    <el-upload
                        class="avatar-uploader"
                        :action="fileUploadURL"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
            </div>
            <el-form-item label="公开邮箱" prop="email">
                <el-input v-model="userInfo.email" class="input-text" placeholder="对外公开的邮箱"></el-input>
            </el-form-item>
            <el-form-item label="兴趣">
                <el-input v-model="userInfo.interest" class="input-text" placeholder="兴趣爱好"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input type="textarea" v-model="userInfo.description" class="description"></el-input>
            </el-form-item>
            <el-form-item label="是否公开信息">
                <div class="expose">
                    <el-switch v-model="userInfo.expose"></el-switch>
                </div>
            </el-form-item>
            <el-form-item label="其它信息">
                <div class="other-info-item">
                    <span class="text">最后登录时间：{{convert(userInfo.lastLoginTime)}}</span>
                </div>
                <div class="other-info-item">
                    <span class="text">创建时间：{{convert(userInfo.createTime)}}</span>
                    <span class="text">更新时间：{{convert(userInfo.updateTime)}}</span>
                </div>
                <div class="other-info-item">
                    <span class="text attention">关注数量：{{userInfo.userAttentionCount}}</span>
                    <span class="text fans">粉丝数量：{{userInfo.fansCount}}</span>
                </div>
            </el-form-item>
            <el-form-item label-width="0">
                <el-button type="success" @click="update" plain>更新</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { mapActions } from 'vuex'
    import { convertTime } from '@/utils/date'
    import { fileUploadURL, getFileURL } from '@/constant'

    export default {
        name: 'infoSelf',
        data () {
            return {
                userInfo: null,
                rules: {
                    nickname: [
                        { required: true, message: '请输入昵称', trigger: 'blur' },
                        { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
                    ],
                    email: [
                        { type: 'email', message: '请填写Email地址', trigger: 'blur' }
                    ]
                }
            }
        },
        mounted () {
            this.action(this.currentUserInfoAction(), data => {
                this.userInfo = data.data
            })
        },
        computed: {
            fileUploadURL () {
                return fileUploadURL
            }
        },
        methods: {
            ...mapActions('user', {
                currentUserInfoAction: 'currentUserInfo',
                updateCurrentUserInfoAction: 'updateCurrentUserInfo',
                getOneUserInfoAction: 'getOneUserInfo'
            }),
            convert (date) {
                return convertTime(date)
            },
            handleAvatarSuccess (res, file) {
                this.userInfo.avatar = `${getFileURL}/${res}`
            },
            beforeAvatarUpload (file) {
                const isJPG = file.type === 'image/jpeg'
                const isLt2M = file.size / 1024 / 1024 < 2

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!')
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!')
                }
                return isJPG && isLt2M
            },
            update () {
                this.action(this.updateCurrentUserInfoAction(this.userInfo), data => this.$message.success('修改成功'))
            }
        }
    }
</script>

<style lang="scss" scoped>
    .userInfo-box {
        margin: 32px;
        padding: 24px;

        .inline-box {
            width: 100%;
            height: 248px;

            .inline-box-left {
                float: left;
                width: 80%;

                .radio-sex {
                    width: 30%;
                    float: left;
                }

                .birthday {
                    width: 20%;
                    float: left;
                }
            }

            .inline-box-right {
                float: right;

                .avatar-uploader .el-upload {
                    border: 1px dashed #d9d9d9;
                    border-radius: 6px;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                }

                .avatar-uploader .el-upload:hover {
                    border-color: #409EFF;
                }

                .avatar-uploader-icon {
                    font-size: 28px;
                    color: #8c939d;
                    width: 178px;
                    height: 178px;
                    line-height: 178px;
                    text-align: center;
                }

                .avatar {
                    width: 178px;
                    height: 178px;
                    display: block;
                }
            }
        }

        .input-text {
            width: 40%;
            float: left
        }

        .description {
            width: 70%;
            float: left
        }

        .expose {
            width: 10%;
            float: left;
        }

        .other-info-item {
            width: 60%;
            height: 56px;

            .text {
                float: left;
                line-height: 56px;
                margin: 0 18px;
            }

            .attention {
                color: rgba(255, 103, 51, 0.8);
            }

            .fans {
                color: rgba(102, 69, 255, 0.8);
            }
        }
    }
</style>
